<template>
  <div ref="dom" class="charts chart-word-cloud"></div>
</template>

<script>
import * as echarts from "echarts";
import tdTheme from "./theme.json";
// import { on, off } from '@/libs/tools'
// import "echarts-wordcloud/dist/echarts-wordcloud";
import "echarts-gl";
// echarts.registerTheme("tdTheme", tdTheme);
export default {
  name: "ChartGl",
  props: {
    value: {
      type: Array,
    },
    title: {
      type: String,
    },
  },
  data() {
    return {
      dom: null,
    };
  },
  watch: {
    value: {
      deep: true,
      handler(val) {
        this.intChart();
      },
    },
    series: {
      deep: true,
      handler(val) {
        this.intChart();
      },
    },
  },
  methods: {
    resize() {
      this.dom.resize();
    },
    intChart() {
      this.$nextTick(() => {
        var option = {
          grid3D: {},
          xAxis3D: {},
          yAxis3D: {},
          zAxis3D: {},
          series: [
            {
              type: "scatter3D", //
              symbolSize: 50,
              data: [
                [-1, -1, -1],
                [0, 0, 0],
                [1, 1, 1],
              ],
              itemStyle: {
                opacity: 1,
              },
            },
          ],
        };
        this.dom = echarts.init(this.$refs.dom, "tdTheme");
        this.dom.setOption(option, true);
        // on(window, 'resize', this.resize)
      });
    },
  },
  mounted() {
    this.intChart();
  },
};
</script>